<template>
  <div id="app">
    <!-- 顶部通知图标 -->
    <div class="notification-icon" @click="showNotifications">
      <badge :count="unreadCount">
        <bell-icon />
      </badge>
    </div>
    
    <!-- 通知抽屉 -->
    <drawer v-model:visible="drawerVisible" title="通知中心">
      <notification-list 
        :notifications="notifications"
        @read="handleRead"
      />
    </drawer>
    
    <router-view />
  </div>
</template>

<script>
import { defineComponent, onMounted, computed, ref } from 'vue';
import { useStore } from 'vuex';
import NotificationList from './components/NotificationList.vue';

export default defineComponent({
  components: { NotificationList },
  
  setup() {
    const store = useStore();
    const drawerVisible = ref(false);
    
    const notifications = computed(() => store.state.notifications);
    const unreadCount = computed(() => store.state.unreadCount);
    
    onMounted(() => {
      const token = localStorage.getItem('token');
      if (token) {
        store.dispatch('initWebSocket', token);
        store.dispatch('fetchNotifications');
      }
    });
    
    const showNotifications = () => {
      drawerVisible.value = true;
    };
    
    const handleRead = (notificationId) => {
      store.dispatch('markAsRead', notificationId);
    };
    
    return {
      notifications,
      unreadCount,
      drawerVisible,
      showNotifications,
      handleRead
    };
  }
});
</script> 